<template>
	<svg-icon
			icon-class="add-icon-1"
			class="add-icon m-l10"
			@click="addHandel"
	></svg-icon>
	<el-empty 	class="m-t20" v-if="state.dataSource.length===0" description="无数据" :image-size="200" />
	<el-tree
			v-else
		class="m-t20"
		:data="state.dataSource"
		node-key="id"
		default-expand-all
		:expand-on-click-node="false"
	>
		<template #default="{ node, data }">
			<div class="custom-tree-node d-flex a-center m-b10">
				<span style="color: #1A1A1A;">{{ data.stageName }}</span>
				<div>
						<el-button
								style="margin-left: 8px;background-color: #fff8f6;border-color: #fc7533;color: #fc7533;"
								@click="update(node, data)">编辑</el-button>
						<el-button
								style="background-color: #fff8f6;border-color: #fc7533;color: #fc7533;"
								@click="append(node, data)">添加下级</el-button>
							<el-button
									color="#F12527" style="color: #FFFFFF;"
									@click="remove(node, data)">删除</el-button>
				</div>
			</div>
		</template>
	</el-tree>
	<!--新增或编辑弹窗	-->
	<public-dialog
		:title="title"
		:width="'30%'"
		v-model:visible="visible"
		@onConfirm="onConfirm"
	>
		<div class="public-dialog-content d-flex j-center a-center">
			<el-form
				:model="dialogForm"
				ref="dialogFormRef"
				:rules="projectRules"
				label-width="90"
			>
				<el-form-item label="阶段名称" prop="">
					<el-input v-model="dialogForm.stageName" placeholder="请输入阶段名称" />
				</el-form-item>
				<el-form-item label="部门名称" prop="">
					<el-select
						v-model="dialogForm.responsibleDepartmentId"
						clearable
						placeholder="请选择部门名称"
					>
						<el-option
							v-for="item in state.allDepartmentList"
							:key="item.departmentId"
							:label="item.departmentName"
							:value="item.departmentId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="责任人名称" prop="">
					<el-select
						v-model="dialogForm.responsibleUserId"
						clearable
						placeholder="请选择责任人"
					>
						<el-option
							v-for="item in state.departmentPersonList"
							:key="item.userId"
							:label="item.userName"
							:value="item.userId"
						/>
					</el-select>
				</el-form-item>
			</el-form>
		</div>
	</public-dialog>
	<div class="buttons-wrap d-flex j-center m-t20">
		<el-button
				color="#FC7018"
				style="color: #FFFFFF"
				@click="nextStep"
		>下一步</el-button>
	</div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from "vue";
import PublicDialog from "@/components/PublicDialog.vue";
import {
	ElForm,
	ElSelect,
	ElFormItem,
	ElButton,
	ElTree,
	ElMessage,
	ElEmpty
} from "element-plus";
import {
	department,
	projectPhase,
} from "@/api/project";

const props = defineProps({
	currentProp:{
		type:Object,
		default:{}
	}
});
const title = ref("编辑");

const dialogForm = ref({
	projectStageId: "",
	responsibleUserId: "",
	responsibleDepartmentId: "",
	stageName: "",
	projectId: "",
	parentProjectStageId: "",
	stageOrder: "",
	level: "",
});

const state = reactive({
	allDepartmentList: [],
	departmentPersonList: [],
	userByDepartmentList: [],
	dataSource: [],
});
// 新增
const addHandel = () => {
	title.value = "新增";
	visible.value = true;
	dialogForm.value = {
		level: 1,
		stageOrder: state.dataSource.length,
		parentProjectStageId: "",
		projectId: props.currentProp.projectId,
		stageName: "",
		responsibleDepartmentId: "",
		responsibleUserId: "",
	};
};

const visible = ref(false);
//添加下级 tree按钮
const append = (node, data) => {
	title.value = "添加下级";
	dialogForm.value = {
		level: data.level + 1,
		stageOrder: node.parent.data.children
			? node.parent.data.children.length + 1
			: 1,
		parentProjectStageId: data.projectStageId,
		projectId: props.currentProp.projectId,
		stageName: "",
		responsibleDepartmentId: "",
		responsibleUserId: "",
	};
	visible.value = true;
};
//删除 tree按钮
const remove = (node, data) => {
	stageRemove({
		projectId: props.currentProp.projectId,
		projectStageId: data.projectStageId,
	});
};
//编辑 tree按钮
const update = (node, data) => {
	title.value = "编辑";
	dialogForm.value = data;
	setTimeout(() => {
		visible.value = true;
	});
};

// 弹出层 提交
const onConfirm = () => {
	if (title.value == "添加下级") {
		stageCreate();
	} else if (title.value == "编辑") {
		stageUpdate();
	} else if (title.value == "新增") {
		stageCreate();
	}
};

/* 新增项目实施单个阶段 接口*/
const stageCreate = () => {
	projectPhase.stageCreate(dialogForm.value).then((res) => {
		if (res.code == 200) {
			if (title.value == "添加下级") {
				dialogForm.value.projectStageId = res.data;
				recursiveCallHandel(
					state.dataSource,
					dialogForm.value.parentProjectStageId
				).children.push(dialogForm.value);
			} else {
				state.dataSource.push(dialogForm.value);
			}
			ElMessage.success("操作成功");
			visible.value = false;
		}
	});
};
/* 更新项目实施单个阶段 接口*/
const stageUpdate = () => {
	projectPhase.stageUpdate(dialogForm.value).then((res) => {
		if (res.code == 200) {
			ElMessage.success("操作成功");
			visible.value = false;
		}
	});
};
/* 删除项目实施单个阶段 接口*/
const stageRemove = (param) => {
	projectPhase.stageRemove(param).then((res) => {
		if (res.code == 200) {
			recursiveCallHandel(state.dataSource, param.projectStageId, "删除");
		}
	});
};

// 递归调用
const recursiveCallHandel = (data, id, type) => {
	let result;
	for (var i = 0; i < data.length; i++) {
		if (data[i].projectStageId == id) {
			if (type == "删除") {
				data.splice(i, 1);
				return;
			} else {
				console.log(22222);
				return data[i];
			}
		} else if (data[i].children && data[i].children.length > 0) {
			result = recursiveCallHandel(data[i].children, id, type);
			if (result) {
				return result;
			}
		}
	}
	return result;
};

// 获取所有部门
const getAllDepartments = () => {
	department.getAllDepartments().then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			state.allDepartmentList = data;
		}
	});
};

// 获取项目 负责人
const getLeaderByDepartmentId = (responsibleDepartmentId) => {
	department.getLeaderByDepartmentId(responsibleDepartmentId).then((res) => {
		const { code, data, msg } = res;
		if (code == 200) {
			state.departmentPersonList = data;
		}
	});
};

// 获取项目实施阶段配置
const getProjectPhase = (projectId,projectTypeId) => {
	projectPhase
		.getProjectPhase({
			projectId: projectId,
			projectTypeId: projectTypeId,
		})
		.then((res) => {
			const { code, data, msg } = res;
			if (code == 200) {
				state.dataSource = data.stages;
			}
		});
};

/**
 * 下一步
 */
const emits = defineEmits(['nextStep']);
const nextStep = () => {
	if(state.dataSource.length===0){
		ElMessage.warning('项目阶段不能为空!');
		return;
	}
	emits('nextStep','goInvestmentPlan');
}

watch(
	() => dialogForm.value.responsibleDepartmentId,
	(value) => {
		if (value) {
			getLeaderByDepartmentId(value);
		}
	}
);

watch(
	() => visible.value,
	(value) => {
		if (!value) {
			dialogForm.value = {};
		}
	}
);

watch(
		()=>props.currentProp,
		(value)=>{
			getProjectPhase(value.projectId,value.projectTypeId);
		},
		{
			deep:true,
			immediate:true
		}
);

onMounted(() => {
	getAllDepartments();
});

defineExpose({state});
</script>
<style lang="scss" scoped>
.el-tree{
	:deep(.el-tree-node__content) {
		height: auto !important;
	}
}
.add-icon{
	width: 18px;
	height: 18px;
}
.projectPeople {
	color: #fff;
	cursor: pointer;

	text-align: center;
	font-size: 12px;
	height: 20px;
	line-height: 20px;
	margin-left: 10px;
	background-color: #d4ae85;
	border-radius: 10px;
	padding-left: 5px;
	padding-right: 5px;
}
</style>
